<!DOCTYPE html>
<html>
<head>
<title>Simple Harmonic Motion Graph</title>
</head>
<body>
<canvas id="shmCanvas" width="450" height="400"></canvas>
<script>
const canvas = document.getElementById('shmCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Parameters ---
ctx.lineWidth = 2.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = 'italic 24px Times New Roman';

// --- Coordinate System Parameters ---
const ox = 80;
const oy = 190;
const scaleT = 80; // pixels per second
const scaleX = 35; // pixels per meter
const width = canvas.width;
const height = canvas.height;

// --- Draw Axes ---
// t-axis (time)
ctx.beginPath();
ctx.moveTo(ox, oy);
ctx.lineTo(width - 40, oy);
ctx.stroke();
// Arrowhead for t-axis
ctx.beginPath();
ctx.moveTo(width - 40, oy);
ctx.lineTo(width - 55, oy - 6);
ctx.lineTo(width - 55, oy + 6);
ctx.closePath();
ctx.fill();

// x-axis (displacement)
ctx.beginPath();
ctx.moveTo(ox, height - 80);
ctx.lineTo(ox, 30);
ctx.stroke();
// Arrowhead for x-axis
ctx.beginPath();
ctx.moveTo(ox, 30);
ctx.lineTo(ox - 6, 45);
ctx.lineTo(ox + 6, 45);
ctx.closePath();
ctx.fill();

// --- Draw Labels ---
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// O for origin
ctx.fillText('O', ox - 20, oy + 20);
// t/s for time axis
ctx.fillText('t/s', width - 45, oy + 25);
// x/m for displacement axis
ctx.fillText('x/m', ox + 30, 40);

// --- Draw Ticks and Tick Labels ---
ctx.font = '24px Times New Roman';
// Tick for 4 on y-axis
const y4 = oy - 4 * scaleX;
ctx.fillText('4', ox - 25, y4);
// Tick for -2 on y-axis
const y_minus_2 = oy - (-2) * scaleX;
ctx.fillText('-2', ox - 25, y_minus_2);
// Tick for 2 on x-axis
const x2 = ox + 2 * scaleT;
ctx.fillText('2', x2, oy + 20);


// --- Draw the Curve ---
// The function is x(t) = A * cos(ωt + φ₀).
// From the graph, we can deduce: Amplitude A = 4.
// At t=0, x=-2. At t=2, x=0 and slope is negative.
// This gives the parameters:
const A = 4;
const omega = 11 * Math.PI / 12;
const phi0 = 2 * Math.PI / 3;

ctx.beginPath();
let firstPoint = true;
for (let t_val = 0; t_val <= 3.2; t_val += 0.01) {
    const x_val = A * Math.cos(omega * t_val + phi0);
    const canvasX = ox + t_val * scaleT;
    const canvasY = oy - x_val * scaleX;
    if (firstPoint) {
        ctx.moveTo(canvasX, canvasY);
        firstPoint = false;
    } else {
        ctx.lineTo(canvasX, canvasY);
    }
}
ctx.stroke();

// --- Draw Dashed Line ---
// Peak occurs when ωt + φ₀ = 2π (or 0, but phase is increasing from 2π/3)
// 11π/12 * t + 2π/3 = 2π  => 11π/12 * t = 4π/3 => t = 16/11
const peak_t = 16 / 11;
const peak_canvas_x = ox + peak_t * scaleT;
const peak_canvas_y = oy - A * scaleX;

ctx.save();
ctx.beginPath();
ctx.lineWidth = 1.5;
ctx.setLineDash([6, 4]);
ctx.moveTo(ox, peak_canvas_y);
ctx.lineTo(peak_canvas_x, peak_canvas_y);
ctx.stroke();
ctx.restore();

</script>
</body>
</html>